<template>
  <div>
    <h2 style="text-align: center">用户管理</h2>
    <el-table :data="cutObj.records" border stripe style="width: 100%">
      <el-table-column prop="userName" label="用户名"  />
      <el-table-column prop="realName" label="真实姓名"  />
      <el-table-column prop="grade" label="权限"  />
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button  type="danger" size="small" @click="del(scope.row)">删除用户</el-button>
          <el-button  type="success" size="small" @click="findById(scope.row)">修改权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="cutObj.current"
        v-model:page-size="cutObj.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutObj.total"
        @current-change="cutAll"
    />

    <el-button  type="primary" style="margin-left: 30px;margin-top: 30px;"
                size="small" @click="showAdd = true">添加用户</el-button>

    <!--添加对话框-->
    <el-dialog
        v-model="showAdd"
        title="添加用户"
        width="50%"
    >

      <el-form
          ref="ruleFormRef"
          :model="userAddObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="userAddObj.userName" />
        </el-form-item>

        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="userAddObj.realName" />
        </el-form-item>

        <el-form-item label="权限" prop="grade">
          <el-select v-model="userAddObj.grade" class="m-2" placeholder="请选择权限" size="large">
            <el-option  label="超级管理员" value="超级管理员"/>
            <el-option  label="采购员" value="采购员"/>
            <el-option  label="销售员" value="销售员"/>
            <el-option  label="库管员" value="库管员"/>
          </el-select>
        </el-form-item>
      </el-form>


      <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="addUser()">添加</el-button>
        <el-button type="primary" @click="showAdd = false">
          取消
        </el-button>
      </span>
      </template>
    </el-dialog>


    <!--修改对话框-->
    <el-dialog
        v-model="showUpdate"
        title="修改用户信息"
        width="50%"
    >

      <el-form
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="用户名" prop="userName">
          {{updateObj.userName}}
        </el-form-item>

        <el-form-item label="真实姓名" prop="realName">
          {{updateObj.realName}}
        </el-form-item>

        <el-form-item label="权限" prop="grade">
          <el-select v-model="updateObj.grade" class="m-2" placeholder="请选择权限" size="large">
            <el-option  label="超级管理员" value="超级管理员"/>
            <el-option  label="采购员" value="采购员"/>
            <el-option  label="销售员" value="销售员"/>
            <el-option  label="库管员" value="库管员"/>
          </el-select>
        </el-form-item>
      </el-form>


      <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="updateUser()">修改</el-button>
        <el-button type="primary" @click="showUpdate = false">
          取消
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      cutObj:{}, //用户分页查询对象
      userAddObj:{}, //添加用户对象
      updateObj:{}, //修改用户对象
      showAdd:false, //是否显示添加用户对话框
      showUpdate:false, //是否显示修改用户对话框
      rules: { //验证规则
        userName: [{required: true,message:'请输入用户名',trigger: 'blur' },
          {pattern:/^[a-zA-Z0-9]{3,}$/,
            message: '用户名必须是三位以上的字母或数字', trigger: 'blur' }],
        realName: [{required: true,message:'请输入真实姓名',trigger: 'blur' },
          {pattern:/^[a-zA-Z\u4e00-\u9fa5]{2,}$/,
            message: '真实姓名必须是二位以上的汉字或字母', trigger: 'blur' }],
        grade: [{required: true,message:'请选择权限',trigger: 'blur' }],
      }
    }
  },
  methods:{
    cutAll(pageNO){//分页查询用户
      axios.get("/project/user/cutAll",{
        params:{
          pageNO
        }
      }).then(resp =>{
        this.cutObj = resp.data;
      })
    },
    addUser(){//添加用户
      this.$refs.ruleFormRef.validate((valid) => {
        if(valid){//验证通过
            axios.get("/project/user/add",{
              params:this.userAddObj
            }).then(resp =>{
              if(resp.data == "ok"){
                this.showAdd = false;//关闭遮罩
                this.cutAll(1);
              }
            })
        }
      });
    },
    del(userObj){//删除用户
      axios.get("/project/user/del",{
        params:{
          id:userObj.id
        }
      }).then(resp =>{
        if(resp.data == "ok"){
          this.cutAll(1);
        }
      })
    },
    findById(userObj){//按ID查询用户
        axios.get("/project/user/findById",{
          params:{
            id:userObj.id
          }
        }).then(resp =>{
          this.updateObj = resp.data;
          this.showUpdate = true;
        });
    },
    updateUser(){//修改用户权限
      axios.get("/project/user/updateGrade",{
          params:this.updateObj
      }).then(resp =>{
        if(resp.data == "ok"){
            this.cutAll(1);
            this.showUpdate = false;
        }
      })
    }
  },
  created() {
    this.cutAll(1);
  }
}
</script>

<style scoped>

</style>